<template>
	<view class="home-wrapper">
		<!-- 头部 -->
		<CommonTitle title="首页" @handleInfoSuccess="handleInfoSuccess"></CommonTitle>
		<!--  -->
		<view class="content-box" :style="{ height: `calc(100% - ${titleBoxHeight}px)` }">
			<!-- 天气 -->
			<Weather></Weather>
			<!-- 今日数据统计 -->
			<view class="today-data-box">
				<view class="title-box">今日数据统计</view>
				<view class="data-list">
					<view
						class="data-item"
						v-for="(item, index) of todayDataSummary"
						:key="index"
						:class="[item.bgClass]"
					>
						<text class="name">{{ item.name }}</text>
						<text class="num">{{ item.num }}</text>
					</view>
				</view>
			</view>
			<!-- 今日实况分析 -->
			<view class="today-real-box">
				<view class="title-box">今日实况分析</view>
				<!-- 地图 -->
				<view class="map-wrapper">
					<!-- 地图组件 -->
					<CustomMap></CustomMap>
					<!-- 右侧数据看板列表 -->
					<view class="data-card-right">
						<view
							class="card-item"
							v-for="(item, index) of todayFactualAnalysis"
							:key="index"
							:style="{
								marginBottom: index + 1 === todayFactualAnalysis.length ? '0' : '20rpx'
							}"
						>
							<view class="title-desc">
								<image class="logo" :src="todayRealLogo" mode=""></image>
								<text>{{ item.name }}</text>
							</view>
							<view class="desc">{{ item.in }}人</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { todayDataConfig } from './config';
import todayRealLogo from '@/assets/images/home/today-real-logo.png';
import { todayDataSummaryAPI, todayFactualAnalysisAPI } from '@/api/dataScreenBig';
import CustomMap from './components/map/index.vue';
// 头部标题信息
const titleBoxHeight = ref(0);
const handleInfoSuccess = (titleInfo) => {
	titleBoxHeight.value = titleInfo.titleBoxHeight;
};

// 今日数据统计
const todayDataSummary = ref([]);
const getTodayDataSummaryFunc = async () => {
	const res = await todayDataSummaryAPI();

	if (res.code !== 200) return;
	todayDataSummary.value = todayDataConfig.map((item) =>
		Object.assign(item, {
			num: res.data[item.numKey]
		})
	);
};

// 今日实况分析
const todayFactualAnalysis = ref([]);
const getTodayFactualAnalysisFunc = async () => {
	const res = await todayFactualAnalysisAPI();
	if (res.code !== 200) return;
	todayFactualAnalysis.value = res.data;
};

onMounted(() => {
	getTodayDataSummaryFunc();
	getTodayFactualAnalysisFunc();
});
</script>

<style lang="scss">
.home-wrapper {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #1d5fb2;
	.content-box {
		width: 100%;
		padding-bottom: 30rpx;
		overflow-y: auto;

		.bg-box {
			background-color: #1d5fb2;
			border-radius: 48rpx 48rpx 0 0;
		}

		.today-data-box {
			padding: 0 30rpx;
			width: 100%;

			.title-box {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: #ffffff;
			}
			.data-list {
				display: grid;
				height: 400rpx;
				gap: 20rpx;
				grid-template-columns: repeat(3, 1fr);

				.data-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 132rpx;
					border-radius: 20rpx;
					.name {
						font-size: 26rpx;
						color: #ffffff;
						line-height: 26rpx;
					}
					.num {
						margin-top: 10rpx;
						font-size: 42rpx;
						color: #fff;
						line-height: 42rpx;
					}

					&.one {
						background: url('/static/home/today-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.two {
						background: url('/static/home/sale-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.three {
						background: url('/static/home/gzj-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.four {
						background: url('/static/home/lscl-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.five {
						background: url('/static/home/kyj-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.six {
						background: url('/static/home/kyc-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
					&.seven {
						background: url('/static/home/ljzl-bg.png') no-repeat center center;
						background-size: 100% 100%;
					}
				}
			}
		}

		.today-real-box {
			margin-top: 50rpx;
			width: 100%;
			.title-box {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: #ffffff;
			}
			.map-wrapper {
				position: relative;
				width: 750rpx;
				height: 770rpx;
				.data-card-right {
					position: absolute;
					left: 0%;
					top: 0%;
					width: 215rpx;
					padding: 82rpx 0 0 8rpx;
					.card-item {
						width: 100%;
						height: 88rpx;
						background: #ff9200;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						border: 2rpx solid #fff715;

						.title-desc {
							display: flex;
							height: 36rpx;
							padding-left: 10rpx;
							align-items: center;
							.logo {
								width: 17rpx;
								height: 17rpx;
							}
							text {
								margin-left: 12rpx;
								font-size: 16rpx;
								color: #fff;
							}
						}
						.desc {
							font-weight: bold;
							font-size: 32rpx;
							color: #a5530d;
							text-align: center;
						}
					}
				}
			}
		}
	}
}
</style>
